<style lang="less">
    /*@import '../../../styles/loading.less';*/
</style>
<style scoped>
    div {
        font-size: 14px;
    }

    .pro-detail-content {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 50px;
    }



    #submit {
        border-radius: 20px;
        width: 200px;
    }

    #back {
        border-radius: 20px;
        margin-left: 20px;
        width: 120px;
    }

    .pro-detail-content .bgk {
        background-color: #EDF2F6;
        padding-top: 20px;
        margin-bottom: 20px;
        padding-left: 20px;

    }


    .common-box-body {
        padding-top: 24px;
    }

    .searchH3 {
        border-bottom: 1px solid #B3CAD7;
    }

    .common-box-header .lookPdf {
        font-weight: normal;
        text-decoration: underline !important;
    }

    .proTable {
        width: 100%;
        font-size: 16px;
        border-collapse: collapse;
        border: 1px solid #DCDCDC;
    }

    /* .proTable tr td{
            
        } */

    .proTable .head {
        height: 40px;
        line-height: 40px;
        font-weight: 500;
        border: 1px solid #DCDCDC;
        border-left: 0;
        border-top: 0;
        text-align: center;
        background-color: #F4F4F4;
    }

    .proTable .cont {
        height: 40px;
        line-height: 40px;
        border: 1px solid #DCDCDC;
        border-left: 0;
        border-top: 0;
        font-weight: 500;
        padding-left: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .proTable tr td.cont span.tese {
        width: 25% !important;
        display: inline-block !important;
        overflow: hidden !important;
    }

    .proTable .yesBorder {
        border-right: 0px;
    }

    .xiazai button {
        margin-top: 8px;
    }

    .xia_btn i {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 20px;
        border-radius: 50%;
        color: rgb(255, 255, 255);
        background-color: rgb(47, 141, 239);
    }
</style>
<style>
    .pro-detail-content .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
        color: #2d8cf0;
        border-color: transparent;
        background-color: #FFF;
    }

    .pro-detail-content .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
        color: #808080;
        border: 1px solid #dddee1;
        border-bottom: 0;
    }
</style>

<template>
    <div class="pro-detail">
        <product-title></product-title>
        <div class="pro-detail-content ">
            <Form>
                <div class="common-box-header">
                    <h3>基本信息</h3>
                </div>
                <Row class="proTable mt20 mb20">

                    <i-col class="head" span="2">订单号码</i-col>
                    <i-col class="cont" span="10">
                        {{formData.order_id}}
                    </i-col>
                    <i-col class="head" span="2">险种名称</i-col>
                    <i-col class="cont yesBorder" span="4">
                        {{formData.policy_name}}
                    </i-col>
                    <i-col class="head" span="2">投保日期</i-col>
                    <i-col class="cont yesBorder" span="4">
                        {{formData.insured_time}}

                    </i-col>

                    <i-col class="head" span="2">俱乐部</i-col>
                    <i-col class="cont" span="10">
                        {{formData.club}}
                    </i-col>
                    <i-col class="head" span="2">投保人</i-col>
                    <i-col class="cont yesBorder" span="4">
                        {{formData.name}}
                    </i-col>
                    <i-col class="head" span="2">总人数</i-col>
                    <i-col class="cont yesBorder" span="4">
                        {{formData.total_insured}}
                    </i-col>


                    <i-col class="head" span="2">总保费</i-col>
                    <i-col class="cont" span="10">
                        {{formData.total_premium}}
                    </i-col>
                    <i-col class="head" span="2">保障期限</i-col>
                    <i-col class="cont yesBorder" span="10">
                        {{formData.effect_start}}至{{formData.effect_end}}
                    </i-col>

                </Row>
                <div class="common-box-header" style="">
                    <h3>
                        投保人信息
                    </h3>
                </div>
                <Row class="proTable mt20 mb20">
                    <i-col class="head" span="2">姓名</i-col>
                    <i-col class="cont" span="10">
                        {{formData.name}}
                    </i-col>
                    <i-col class="head" span="2">性别</i-col>
                    <i-col class="cont yesBorder" span="4">
                        {{formData.sex}}
                    </i-col>
                    <i-col class="head" span="2">出生日期</i-col>
                    <i-col class="cont yesBorder" span="4">
                        {{formData.birthday}}
                    </i-col>


                    <i-col class="head" span="2">证件类型</i-col>
                    <i-col class="cont" span="10">
                        {{formData.id_type}}
                    </i-col>
                    <i-col class="head" span="2">证件号码</i-col>
                    <i-col class="cont yesBorder" span="10">
                        {{formData.id_number}}
                    </i-col>


                    <i-col class="head" span="2">联系电话</i-col>
                    <i-col class="cont" span="10">
                        {{formData.mobile}}
                    </i-col>
                    <i-col class="head" span="2">电子邮箱</i-col>
                    <i-col class="cont yesBorder" span="10">
                        {{formData.email}}
                    </i-col>

                </Row>
                <div class="common-box-header" style="padding-right:0;">
                    <h3>
                        被保人信息
                    </h3>
                    <!-- https://192.168.0.10:82/api/batch_export/download_zip  测试本地环境 -->
                    <!-- <a class="xiazai" :href="'https://test.kuaibao365.com/batch_export/download_zip?order_id='+formData.order_id"> -->
                    <Button type="warning" :disabled='canclick' icon="icon iconfont icon-vertical-align-botto" class="fr xia_btn " @click="down_zip"
                        style="margin-top:8px;">
                        下载全部保单
                    </Button>
                    <!-- </a> -->
                </div>
                <div v-if="progress" style="padding:10px">
                    <Progress :percent="percent"></Progress>
                </div>
                <div class="detail mt20 mb20">
                    <div class="clearfix">
                        <div class="table-theme highlight_table">
                            <Table size="large" stripe border :columns="columns1" :data="tablelist" class=""></Table>
                        </div>
                    </div>
                </div>
            </Form>
            <div id="footer" class="pt22">
                <Button id="back" shape="circle" @click="back" style="border-radius: 30px !important;">返回</Button>
            </div>
        </div>
    </div>
</template>
<script>
    import productTitle from '../../components/productTitle';
    import {
        hc_policy_detail,
        download_zip,
        get_zip,
        create_zip
    } from '../../api/tra.js'
    export default {
        data() {
            return {
                canclick: false,
                progress: false,
                percent: 0,
                formData: {},
                list: [],
                form: {},
                count: 0,
                num: 1,
                tablelist: [

                ],
                columns1: [{
                        title: '姓名',
                        key: "name",
                        align: 'center',
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        align: 'center',
                    },
                    {
                        title: '联系电话',
                        key: 'mobile',
                        align: 'center',
                    },
                    {
                        title: '证件类型',
                        key: 'id_type',
                        align: 'center',
                    },
                    {
                        title: '证件号码',
                        key: 'id_number',
                        align: 'center',
                        width: 160,
                    },
                    {
                        title: '出生日期',
                        key: 'birthday',
                        align: 'center'
                    },
                    {
                        title: '险种类型',
                        key: 'insured_type',
                        align: 'center'
                    },
                    {
                        title: '保费(元)',
                        key: 'premium',
                        align: 'center'
                    },
                    {
                        title: '保单号',
                        key: 'policy_num',
                        align: 'center',
                        width: 200,
                    },
                    {
                        title: '电子保单',
                        key: 'insured_date',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'icon iconfont icon-vertical-align-botto',
                                        size: 'small'
                                    },
                                    style: {
                                        width: '25px',
                                        height: "25px",
                                        lineHeight: "25px",
                                        fontSize: "20px",
                                        color: '#fff',
                                        background: "#2F8DEF",
                                        borderRadius: "50%",
                                        marginRight: "5px",
                                        cursor: "pointer",
                                    },
                                }),
                                h('a', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        color: '#3F75E1'
                                    },
                                    attrs: {
                                        href: params.row.policy_url
                                    },
                                }, '电子保单'),
                            ]);
                        }
                    },
                ],
            }
        },
        components: {
            productTitle,
        },
        created() {
            this.getdetail();
        },
        activated() {

        },
        methods: {
            back() {
                this.$router.push({
                    name: 'potravel'
                })
            },
            getdetail() {
                var _site = {
                    id: this.$route.params.id
                }
                new Promise((resolve, reject) => {
                    hc_policy_detail(_site).then(response => {
                            console.log(response.data.data.result, "....")
                            if (response.data.err == 0) {
                                this.formData = response.data.data.result;
                                console.log(this.formData.order_id, '....this.formData.oid')
                                this.tablelist = response.data.data.list;
                                // 规定下载20条电子保单为一个压缩包 this.count决定下载了几个压缩包
                                this.count = Math.ceil(this.tablelist.length / 20);
                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            },
            down_zip() {
                this.progress = true;
                let _userlistasc = this.count;

                if (_userlistasc > 0) {
                    this.canclick = true
                    this.sync(_userlistasc)
                } else {
                    this.$Message.error('请核实是否存在电子保单');
                }
            },
            sync(_userlistasc) {
                var _this = this;
                if (_this.num > _userlistasc) {
                    _this.num = 1;
                    // _this.progress = fasle;
                    var elemIF = document.createElement("iframe");
                    elemIF.src = 'https://test.kuaibao365.com/batch_export/download_zip?order_id='+_this.formData.order_id;
                    elemIF.style.display = "none";
                    document.body.appendChild(elemIF);


                    _this.canclick = false;
                    return;
                }
                let _params = {
                    page: _this.num,
                    order_id: _this.formData.order_id
                }
                new Promise((resolve, reject) => {
                    create_zip(_params).then(res => {
                        if (res.data.err == 0) {
                            // 线上IP地址
                            // var elemIF = document.createElement("iframe");
                            // elemIF.src = 'https://test.kuaibao365.com/batch_export/download_zip?order_id='+_this.formData.order_id + '&page=' + _this.num;
                            // elemIF.style.display = "none";
                            // document.body.appendChild(elemIF);
                            // c测试环境IP地址
                            // var elemIF = document.createElement("iframe");
                            // elemIF.src = 'https://192.168.0.10:82/batch_export/download_zip?order_id='+_this.formData.order_id + '&page=' + _this.num;
                            // elemIF.style.display = "none";
                            // document.body.appendChild(elemIF);
                            _this.percent = parseInt((_this.num*100/_userlistasc).toFixed(1))
                            
                            _this.num++;
                            // 防止下载超时,
                            // this.sync(_userlistasc)
                            setTimeout(()=>{
                                _this.sync(_userlistasc)
                            },1000*5)
                        } else {
                            _this.$Message.error("错误");
                        }

                        resolve();
                    }).catch(error => {
                        _this.canclick = false
                        reject(error);
                    });
                });
            },
        }
    }
</script>